import * as HandleImagePicker from "expo-image-picker";
import { Button, Image, Pressable, View } from "react-native";

interface ImagePickerProps {
  onChange: (uri: string) => void;
  value: string;
}

const ImagePicker: React.FC<ImagePickerProps> = ({ onChange, value }) => {
  const pickImageAsync = async () => {
    let result = await HandleImagePicker.launchImageLibraryAsync({
      mediaTypes: ["images"],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });
    onChange(result.assets?.[0]?.uri || "");
    return result.assets?.[0]?.uri || "";
  };

  return (
    <View>
      {value ? (
        <Pressable
          onPress={() => {
            pickImageAsync();
          }}
        >
          <Image
            resizeMode="contain"
            resizeMethod="scale"
            source={{ uri: value }}
            style={{ width: 100, height: 100 }}
          />
        </Pressable>
      ) : (
        <Button
          title="选择图片"
          onPress={() => {
            pickImageAsync();
          }}
        />
      )}
    </View>
  );
};

export default ImagePicker;
